<template>
    <div class="listView">
        <!-- 引入公共组件列表头部,并把 请求的数据playlist传给子组件-->
        <listviewTop :playlist="state.playlist"></listviewTop>
        <playList :playlist="state.playlist"></playList>
        {{this.$store.state.playCurrentIndex}}
    </div>
</template>

<script>
// 引入头部和列表组件
import listviewTop from '@/components/listviewTop.vue';
import playList from '@/components/playList';
import { reactive,onMounted,vueX } from 'vue';
// 引入获取表单的请求方法
import {getPlayListDetail} from '@/api/index';
// 使用路由
import { useRoute } from 'vue-router'
// 引入vuex
import store from '@/store/index';
export default {
    setup(props){
        let state = reactive({
            playlist:{},
            al:{},
            tracks:{}
        })
        // 发送获取歌单详情的请求
        onMounted(async () => {
            // 获取路由里面的id
            let id = useRoute().query.id
            // 请求时候传入相应的id
            let res = await getPlayListDetail(id)
            state.playlist = res.data.playlist
            console.log(state.playlist);
            // res.data.playlist.tracks.forEach((item)=>{
            //     state.tracks = item
            //     state.al = item.al
            //     store.commit('changetracks',state.tracks)
            //     store.commit('changeal',state.al)
            // })

            // // 把这些数据给store里面的setPlayList方法
            store.commit('setPlayList', state.playlist)
             
            
        })
        return {
            state
        };
    },
    // 映射组件
    components: { listviewTop,playList }
}
</script>